<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Alipay Barcode Admin Site</title>
<link href="<%=request.getContextPath()%>/resources/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="<%=request.getContextPath()%>/resources/css/style.css" rel="stylesheet">
<script src="<%=request.getContextPath()%>/resources/jquery/jquery-2.2.1.min.js"></script>
<script src="<%=request.getContextPath()%>/resources/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#addForm').submit(function (e) {
		//alert($("#selectedMerchant > option").length);
		if(!$("#merchantGroupName").val()){
			$("#warningModalContent").text("Mechant group name should not empty.");
			$("#warningModal").modal();
			e.preventDefault();
		}else if($("#selectedMerchant > option").length<=1){
			$("#warningModalContent").text("Please select at least two merchants to make group.");
			$("#warningModal").modal();
			e.preventDefault();
		}else{
			$('#selectedMerchant option').prop('selected', true);
			$("#waitingModal").modal({
			  backdrop: 'static',
			  keyboard: false
			});
		}
	});
	
	$("#merchant2Right").click(function(){
		var $options = $("#oldMerchant > option:selected");
		$('#selectedMerchant').append($options);
		$("#oldMerchant").remove($options);
 	});
	$("#merchant2Left").click(function(){
		var $options = $("#selectedMerchant > option:selected");
		$('#oldMerchant').append($options);
		$("#selectedMerchant").remove($options);
 	});
});
</script>
</head>
<body>
<div id="wrap">
<%@ include file="../header.jsp" %>
<div class="container">
	<div class="page-header">
		<h1 class="text-center">Merchant Group Management Page</h1>
	</div>
	<br>
	<div class="page-header">
		<h3 class="text-center">Input Merchant Group</h3>
	</div>
	<br>
	<form method="POST" action="<%=request.getContextPath()%>/admin/addMerchantGroupComplete" id="addForm">
		<div class="row">
			<div class="col-md-2">&nbsp;</div>
			<div class="col-md-8">
				<table class="table table-bordered table-condensed table-striped">
					<tr>
				        <td class="lead">Merchant Group Name:</td>
			            <td><input type="text" class="form-control" id="merchantGroupName" name="merchantGroupName" placeholder="merchant group name" value=""></td>
			        </tr>
			    </table>
			    <br>
			    <table class="table table-bordered table-condensed table-striped" id="emailTable">
			    	<tbody>
			    		<tr>
			    			<td class="lead text-center">All merchant</td>
			    			<td class="lead text-center">move to</td>
			    			<td class="lead text-center">Selected merchant</td>
			    		</tr>
				    	<tr>
					        <td class="text-center">
								<select multiple name="oldMerchant" id="oldMerchant" size="10" style="min-width: 200px;">
									<c:forEach var="mi" items="${merchantList}" varStatus="status">
										<option value="${mi.id}">${mi.merchantName}</option>
									</c:forEach>
								</select>
					        </td>
					        <td class="text-center">
					        	<br>
					        	<br>
					        	<br>
					        	<span class="glyphicon glyphicon-arrow-right" role="button" id="merchant2Right"></span>
					        	<br>
					        	<br>
					        	<span class="glyphicon glyphicon-arrow-left" role="button" id="merchant2Left"></span>
					        </td>
					        <td class="text-center">
					        	<select multiple name="selectedMerchant" id="selectedMerchant" size="10" style="min-width: 200px;">									
								</select>
					        </td>
				        </tr>
			        </tbody>
			    </table>
				
				<br><br><br>
				<div class="row">
					<div class="col-md-5">&nbsp;</div>
					<div class="col-md-2">
						<button type="submit" class="btn btn-primary btn-md btn-block" name="submitButton" id="submitButton">Submit</button>
						<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
					</div>
					<div class="col-md-5">&nbsp;</div>
				</div>
				
			</div><!-- main content div end-->
			<div class="col-md-2">&nbsp;</div>
		</div>
	</form>
	
<%@ include file="../warningModalDIV.jsp" %>
<%@ include file="../waitingModalDIV.jsp" %>
	
</div><!-- container end -->
</div><!-- wrap end -->
<%@ include file="../footer.jsp" %>
</body>
</html>